Estoy tratando de crear un sitio web que obtenga 10 líneas aleatorias de un poema y luego las muestre en el archivo HTML, pero en lugar de obtener los datos .json, obtengo [object Promise]. ¿Alguien me puede ayudar?
Aquí está mi código:
JS:
let url = 'https://poetrydb.org/random,linecount/1;10/title,author,lines.json' const button = document.getElementById('button') const body = document.getElementById('poem') async function requestPoem(url) { await fetch(url) .then((response)=>{ let data = response.json() return data }) } button.onclick = ()=>{ body.innerHTML = requestPoem(url) }HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script defer src="scripts/main.js"></script> <title>poem request</title> </head> <body> <p id="poem"></p> <button id="button">request poem</button> </body> </html>requestPoem es una función async , por lo que solo puede devolver una promesa. No puede evitar la promesa, pero puede usarla, ya sea llamando a .then , o poniendo su código en una función async y await el resultado. Además, su función requestPoem actual no tiene una declaración de devolución, por lo que necesitará una para definir en qué se resuelve la promesa.
async function requestPoem(url) { const response = await fetch(url); return response.json(); } button.onclick = async () => { body.innerHTML = await requestPoem(url); }Resulta que el error en el código fue que la API devolvía una matriz de objetos en lugar de un solo objeto. Debido a esto, primero tuve que devolver data[0] y obtener las propiedades del objeto desde allí.